@import "../common/rem";
@import "../common/variables";
@import "../less/style";
@import "../common/mixins";
@import "../less/util";

#AllOKRs {
    .favor-icon {
        .px2rem(top, 4);
        position: relative;
        -moz-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH();
        display: inline-block;
        .px2rem(width, 34);
        .px2rem(height, 34);
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('../images/zan@2x.png');
    }
    .image {
        .px2rem(padding-left, 32);
        .px2rem(margin-bottom, 14);
        .px2rem(padding-right, 32);
        .px2rem(max-width, 695);

        div {
            display: inline-block;
            position: relative;
            .px2rem(width, 200);
            .px2rem(height, 200);
            @media (min-device-width: 320px) and (max-device-width: 359px) {
                .px2rem(width, 180);
                .px2rem(height, 180);
            }
            overflow: hidden;
            .px2rem(margin-right, 10);
            .px2rem(margin-bottom, 10);

            img {
                .px2rem(min-height, 200);
                .px2rem(min-width, 200);
                position: absolute;
                top: 0;
                left: 0;
            }
            //width: 30%;
            //margin-right: 0.13333333rem;
            //height: auto;
        }
        img {
            &:first-child {

            }

            //.px2rem(width, 152);
            //.px2rem(margin-right, 10);
        }
    }
    .favor-num, .comment-num {
        .px2px(font-size, 28);
    }
    .main {
        background: #F6F9FA;
        .px2rem(top, 89);
        .px2rem(bottom, 100);

    }
    .content {
        .px2rem(margin-top, 100);
        width: 100%;
    }
    .top {
        .px2rem(padding-top, 22);
        .px2rem(padding-bottom, 26);
        display: table;
        width: 100%;
        .px2rem(padding-left, 32);
        .px2rem(padding-right, 32);
    }
    .log-type {
        .px2rem(height, 40);
        .px2px(font-size, 24);
        .px2rem(padding-left, 32);
        .px2rem(line-height, 40);

        span {
            color: white;
            background-color: @color-log;
            .px2rem(border-radius, 8);
            .px2rem(margin-right, 10);
            .px2rem(padding-top, 5);
            .px2rem(padding-bottom, 5);
            .px2rem(padding-right, 8);
            .px2rem(padding-left, 8);
        }

    }
    .log-item-main {
        .px2px(font-size, 28);
        position: relative;
        .px2rem(margin-top, 20);
        .px2rem(margin-bottom, 24);
        .px2rem(padding-left, 32);
        .px2rem(padding-right, 32);

        .px2rem(max-height, 320);
        overflow: hidden;
    }

    .liked {
        color: red !important;
    }
    .alllog-item {
        height: auto;
        word-break: break-all;
        .px2rem(line-height, 40);
        span {
            .px2rem(padding-right, 10);
            color: #aaaaaa;
            margin: 0;
        }
    }
    .okrs-content {
        .px2rem(margin-bottom, 18);
        background: #fff;
        .px2rem(top, 10);
        .px2rem(padding-left, 30);
        color: #42474A;
        border-bottom: 1px solid #ddd;
        .title {
            .px2px(font-size, 32);
            p {
                display: block;
                width: 100%;
                .px2rem(height, 110);
                .px2rem(line-height, 110);
                .px2rem(padding-right, 40);
                border-bottom: 1px solid #FEDA35;
                margin: 0;
                text-overflow: ellipsis;
                overflow: hidden;
                word-wrap: break-word;
                white-space: nowrap;
                .circle {
                    display: inline-block;
                    background-color: #FEDA35;
                    .px2rem(width, 20);
                    .px2rem(height, 20);
                    .px2rem(margin-right, 20);
                    -moz-border-radius: 10px;
                    -webkit-border-radius: 10px;
                    border-radius: 10px;
                }
            }
        }
        .key-results {
            padding: 0;
            margin: 0;
            color: #93A2AD;
            li {
                .px2px(font-size, 30);
                display: block;
                width: 100%;
                list-style: none;
                .px2rem(height, 110);
                .px2rem(line-height, 110);
                .px2rem(padding-right, 40);
                border-bottom: 1px solid #DDD;
                text-overflow: ellipsis;
                overflow: hidden;
                word-wrap: break-word;
                white-space: nowrap;
            }
            li:last-child {
                border: none;
            }

        }
        .writer-photo {
            img {
                display: block;
            }
            display: table-cell;
            vertical-align: middle;
            .px2rem(margin-left, 30);
            .px2rem(margin-top, 22);
            .px2rem(width, 80);
            .px2rem(height, 80);
            .head-photo {
                .px2rem(width, 80);
                .px2rem(height, 80);
                .px2rem(border-radius, 100);
            }
        }
        .line-limit {
            .px2px(font-size, 24);
        }
        .writer-info {
            .px2rem(padding-left, 22);
            display: table-cell;
            vertical-align: middle;
            .writer-name {
                color: #2d2d2d;
                .px2rem(font-size, 32);
            }
            .date-and-phone {
                color: #aaaaaa;
                .px2rem(font-size, 22);
                span {
                    .px2rem(margin-right, 12);
                }
            }
        }

        .expand-or-pack-up {
            display: none;
            color: @color-log;
            .px2rem(height, 50);
            .px2rem(line-height, 50);
            .px2rem(font-size, 26);
            .px2rem(padding-left, 32);
            .px2rem(margin-bottom, 24);
            .px2rem(margin-top, -10);
            span {
            }

        }
        .log-bottom-box {
            position: relative;
            .hairline(top, #ddd);
            .hairline(bottom, #ddd);
            .px2rem(height, 68);
            display: table;
            width: 100%;
            .px2rem(font-size, 22);
            .px2rem(line-height, 34);
            color: #969696;
            .log-bottom-left {
                border-right: 1px solid #DEE3EE;
            }
            .log-bottom {
                span {

                }
                width: 50%;
                position: relative;
                .px2rem(top, 12);
                display: inline-block;
                text-align: center;
                .icon--15 {
                    position: relative;
                    .px2rem(top, 2);
                    .px2rem(font-size, 34);
                    .px2rem(padding-right, 4);
                }
                .icon--19 {
                    position: relative;
                    .px2rem(top, 6);
                    .px2rem(font-size, 34);
                    .px2rem(padding-right, 4);
                }
            }
        }

        .multi-select {
            background: #fff;
            .px2rem(margin-top, 20);
            .px2rem(margin-bottom, 20);
            .multi-select-type {
                display: inline-block;
                padding: 0;
                .px2rem(font-size, 24);
                span {
                    .px2rem(padding-top, 10);
                    .px2rem(padding-bottom, 10);
                    .px2rem(padding-left, 12);
                    .px2rem(padding-right, 12);
                    .px2rem(margin-right, 14);
                    background-color: #F4F6F7;
                    color: #969696;
                    border-radius: 8px;
                    white-space: nowrap;
                    line-height: 3;
                }
                span.kw-selected {
                    background-color: #F76A75;
                    color: #ffffff;
                }
            }
        }
    }
    .triangle-up {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid @color-log;
    }

    // 新建日志按钮
    .add-okrs {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        .px2rem(padding-left, 30);
        .px2rem(padding-right, 30);
        .px2rem(height, 100);
        border-top: 1px solid #ddd;
        .add-okrs-button {
            margin: 0 auto;
            .px2rem(height, 100);
            .px2rem(line-height, 100);
            color: #F76A75;
            .px2px(font-size, 30);
            text-align: center;
            .add-icon {
                position: relative;
                .px2rem(padding-right, 10);
                .px2rem(top, 1);
            }
        }
    }
}